import React, {Component} from 'react'
import {
    StyleSheet, Text,
    View, Image, TouchableOpacity,
    Dimensions, ScrollView
} from 'react-native'
import Shopgridviewpageitem from './shopgridviewpageitem'
import PageControl from './PageControl'
let {height, width} = Dimensions.get('window');

export default class shopgridviewpage extends Component {
    constructor(props) {
        super(props)
        this.state = {
            currentPage: 0
        }
    }

    render() {
        let {menuInfos, onMenuSelected} = this.props;
        let menuItems = menuInfos.map(
            (info, i) => (<Shopgridviewpageitem
                    key={info.title}
                    title={info.title}
                    icon={info.icon}
                />
            )
        );
        let menuViews = []
        let pageCount = Math.ceil(menuItems.length / 10)

        for (let i = 0; i < pageCount; i++) {
            let length = menuItems.length < (i * 10) ? menuItems.length - (i * 10) : 10
            let items = menuItems.slice(i * 10, i * 10 + length)
            let menuView = (
                <View style={styles.itemsView} key={i}>
                    {items}
                </View>
            )
            menuViews.push(menuView)
        }
        return (
            <View style={styles.container1}>
                <ScrollView contentContainerStyle={styles.contentContainer}
                            horizontal={true}
                            showsHorizontalScrollIndicator={false}
                            pagingEnabled={true}
                            onScroll={(e) => this.onScroll(e)}>
                    <View style={styles.menuContainer}>
                        {menuViews}
                    </View>
                </ScrollView>
                {/*返回指示器*/}
                <View style={styles.pageViewStyle}>
                    {/*返回圆点*/}
                    {this.renderPageCircle()}
                </View>
            </View>
        );
    }

    onScroll(e: any) {
        let x = e.nativeEvent.contentOffset.x;
        let currentPage = x / width;
        if (this.state.currentPage != currentPage) {
            this.setState({
                currentPage: currentPage
            })
        }
    };

    renderPageCircle() {
        // 定义一个数组放置所有的圆点
        var indicatorArr = [];
        var style;
        // 拿到图像数组
        // 遍历
        for (var i = 0; i < 2; i++) {
            // 判断
            style = (i == this.state.currentPage) ? {backgroundColor: '#000', borderRadius:25} : {backgroundColor: '#ddd',borderRadius:25};
            // 把圆点装入数组
            indicatorArr.push(
                <View key={i} style={[{width:10,height:10,marginLeft:10}, style]}/>
            );
        }
        // 返回
        return indicatorArr;
    };
}

const styles = StyleSheet.create({
    container1: {
        backgroundColor: 'white',
        flexDirection: 'column',
    },
    contentContainer: {
        paddingTop:10
    },
    menuContainer: {
        flexDirection: 'row',
    },
    itemsView: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        width: width,
    },
    pageControl: {
        margin: 10,
    },
    pageViewStyle: {
        width: width,
        height: 25,
        backgroundColor: '#fff',
        // 设置主轴的方向
        flexDirection: 'row',
        // 设置侧轴方向的对齐方式
        alignItems: 'center',
        justifyContent:'center'
    }
});

module.exports = shopgridviewpage